<!--
    Created by wangyang on 2019-01-26.
    itwangyang@gmail.com
    http://itwangyang.xyz
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>A.I票据-用户中心-基本信息5</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/bootstrap-select.css">
    <link rel="stylesheet" href="../../css/style.css">
    <link rel="stylesheet" href="../../css/app.css">

    <style>
        p {
            margin: 0;
        }

        label {
            margin: 0;
            padding: 0;
            vertical-align: middle;
        }

        .row.text-center.offset-3.mt-2.mb-2 {
            display: flex;
            align-items: center;
        }
        [v-clock]{
            display: none;
        }

        .ivu-select-large.ivu-select-single .ivu-select-selection {
            display: block;
            width: 100%;
            height: calc(2.25rem + 2px);
            padding: .375rem .75rem;
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.5;
            color: #202020 !important;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid #ced4da !important;
            border-radius: .25rem;
            transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
        }

        .my-title-alert.fontcolor20.wi100.flexBox-row.pl-3 p {
            font-size: 20px;
        }
        .page-link {
            position: relative;
            display: block;
            padding: .2rem .25rem;
            margin-left: -1px;
            line-height: 1.25;
            color: #007bff;
            background-color: #fff;
            border: none;
        }

    </style>

</head>
<body>
<!--ticket-top begin-->
<div class="ticket-top container-fluid">
    <div class="container">
        <nav class="ticket-top-nav">
            <a class="ticket-top-nav-item active" href="#">服务热线:120362564</a>
            <a class="ticket-top-nav-item" href="#">服务时间：<span>9:00-12:00</span></a>
        </nav>
    </div>
</div>
<!--ticket-top end-->

<!--navbar-meau begin-->
<section class="container-fluid navbar-meau">
    <nav class="container navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="index.html"><img src="../../images/logo.png" alt=""
                                                       class="img-responsive"
                                                       width="208"
                                                       height="54"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item ">
                    <a class="nav-link" href="../../index.html">首页 <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">我要出票</a>
                </li>
                <li class="nav-item ">
                    <a class="nav-link" href="#">交易大厅</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">我的订单</a>
                </li>
            </ul>

            <div class="dropdown">
                <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
                    <span class="fontSize14 fontcolor20">ID号133214412@qq.com</span>
                </button>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">用户中心</a>
                    <a class="dropdown-item" href="#">退出登录</a>
                </div>
            </div>

        </div>
    </nav>
</section>
<!--navbar-meau end-->


<!--面包导航条 begin-->
<section class="container breadNavigationBar fontSize16 ">
    <div class="row ml-1">
        <li><a class="fontcolor20" href="../../index.html">首页</a></li>
        <span class="ml-2 mr-2">&gt;</span>
        <li>
            <a href="" class="fontcolor20">用户中心</a></a>
            <span class="ml-2 mr-2">&gt;</span>
        </li>

        <li>
            <a href="">基本信息</a></a>
        </li>
    </div>
</section>
<!--面包导航条 end-->


<section class="container mb-5">
    <div class="row">
        <div class="col col-lg-3">
            <div class="left-nav">
                <div class="account-l">
                    <ul id="accordion" class="accordion">
                        <li>
                            <div class="link">我是卖方<i class="fa fa-chevron-down"></i></div>
                            <ul class="submenu">
                                <li id="giveOffBall"><a>我要出票</a></li>
                                <li id="order1"><a>订单列表</a></li>
                            </ul>
                        </li>
                        <li>
                            <div class="link">我是买方<i class="fa fa-chevron-down"></i></div>
                            <ul class="submenu">
                                <li id="giveBall"><a>我要收票</a></li>
                                <li id="order2"><a>订单列表</a></li>
                            </ul>
                        </li>
                        <li class="open">
                            <div class="link">账户管理<i class="fa fa-chevron-down"></i></div>
                            <ul class="submenu" style="display: block;">
                                <li id="initInfo" class="current"><a>基本信息</a></li>
                                <li id="moneyNuber"><a>资金账户</a></li>
                                <li id="info"><a>消息中心</a></li>
                            </ul>
                        </li>
                        <li>
                            <div class="link">设置<i class="fa fa-chevron-down"></i></div>
                            <ul class="submenu">
                                <li id="setpwd"><a>修改密码</a></li>
                            </ul>
                        </li>

                    </ul>


                </div>
            </div>
        </div>
        <div class="col col-lg-9">

            <div class="ul-item-content">
                <div class="row">
                    <div class="my-title-alert fontcolor20 wi100 flexBox-row pl-3" style="width: 98.6%">
                        <p><span class="my-alert-title-border mr-1"></span>基本信息》<a class="mainColor"
                                                                                   style="color: #218afd">增加银行账户</a></p>
                    </div>
                </div>
                <div class="row text-center  mt-4  mb-3">
                    <div class="col-lg-3 mb-3  pull-right">
                        <label class="fontColor75 fontSize16">所属银行:</label>
                    </div>
                    <div class="col-lg-6 pull-left">
                        <div  class="form-control " id="mySelect"><sapn class="textContent fontSize14 fontColor75">请你选择所属银行</sapn></div>

                    </div>
                    <div class="col-lg-9 offset-3">
                        <div class="mySelect position-relative">
                            <div id="city_1" class="flexBox-row pt-1">
                                <select class="prov form-control ml-1"></select>
                                <select class="city form-control ml-2 mr-2" disabled="disabled"></select>
                                <input type="text" class="form-control" placeholder="请您输入">
                                <button type="button" class="btn btn-primary ml-2 mr-1 btn-select fontSize14">搜索</button>
                            </div>

                            <div class="bank-content  text-justify">
                                <li>显示内容</li>
                                <li>显示内容</li>
                                <li>显示内容</li>
                                <li>显示内容</li>
                                <li>显示内容</li>
                                <li>显示内容</li>
                                <li>显示内容</li>
                                <li>显示内容</li>
                                <li>显示内容</li>
                            </div>

                            <div class="my-pagination position-absolute mr-1">
                                <ul class="pagination">
                                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                                </ul>
                            </div>


                        </div>
                    </div>
                </div>

                <div class="row text-center    ">
                    <div class="col-lg-3  pull-right mt-2">
                        <label class="fontColor75  fontSize16" for="id_select">开户行行号:</label>
                    </div>
                    <div class="col-lg-6 pull-left">
                        <!--<div class="form-group" id="my-select">
                            <i-select
                                    size="large"
                                    v-model="bank"
                                    filterable
                                    remote
                                    :remote-method="searchBanks"
                                    :loading="loading">
                                <i-option v-for="(bank, index) in banks" :value="bank.value" :key="index">{{bank.label}}</i-option>
                            </i-select>
                        </div>-->
                        <div class="form-group">
                            <input type="text" placeholder="请您输入开户行行号" class="form-control">

                        </div>

                    </div>
                </div>



                <div class="row text-center   mt-2 mb-2">
                    <div class="col-lg-3  pull-right">
                        <label class="fontColor75 fontSize16 mb-3">银行账号:</label>
                    </div>
                    <div class="col-lg-6 pull-left">
                        <div class="form-group">
                            <input type="text" placeholder="请您输入银行账号" class="form-control">
                        </div>
                    </div>
                </div>

                <div class="row text-center  mt-2 mb-2">
                    <div class="col-lg-3  pull-right">
                    </div>
                    <div class="col-lg-6 pull-left mb-4">
                        <button type="submit" class="addBankNumber-btn btn btn-primary fontSize16" data-toggle="modal"
                                data-target="#myModal">增加银行账户
                        </button>
                    </div>
                </div>


            </div>

            <div id="show3Div" style="display: none">
                增加成功
            </div>


        </div>
    </div>
</section>


<!--footer begin-->
<footer class="container-fluid">
    <div class="footer container pt-3">
        <div class="row" style="color: #fff">
            <div class="col-lg-4 col-md-3 col-sm-12 ">
                <p>客服热线</p>
                <p class="tel">4000-00000-1000</p>
                <li class="navbar-bottom-item">工作时间：8：00-18：00</li>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-12 ">
                <p>关于我们</p>
                <li class="navbar-bottom-item"><a href="">关于澳赢科技</a></li>
                <li class="navbar-bottom-item"><a href="">联系我们</a></li>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-12 ">
                <p>电票交易</p>
                <li class="navbar-bottom-item"><a href="">获取交易权限</a></li>
                <li class="navbar-bottom-item"><a href="">交易流程</a></li>
                <li class="navbar-bottom-item"><a href="">电子使用规则</a></li>
                <li class="navbar-bottom-item"><a href="">相关下载</a></li>
                <li class="navbar-bottom-item"><a href="">常见问题</a></li>
            </div>
            <div class="col-lg-2 col-md-3 col-sm-12 ">
                <img src="../../images/qr_code.png" alt="" width="123" height="120"
                     class="img-responsive">
                <p>微信公众号</p>
            </div>
        </div>
    </div>
</footer>
<!--footer end-->

<script src="../../js/jquery.js"></script>
<script src="../../assest/js/vue.js"></script>
<script src="../../assest/js/jquery.cityselect.js"></script>

<script src="//unpkg.com/iview/dist/iview.min.js"></script>
<script src="../../js/bootstrap-select.js"></script>
<script src="https://cdn.bootcss.com/select2/4.0.6-rc.1/js/select2.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<script src="../../assest/js/bootstrap-notify.min.js"></script>
<script src="../../js/common.js"></script>

<script type="text/javascript">
    /*下拉选择框*/
    $(function(){
        $('#id_select').searchableSelect();
    });


    $(function () {
        var Accordion = function (el, multiple) {
            this.el = el || {};
            this.multiple = multiple || false;
            var links = this.el.find('.link');
            links.on('click', {
                el: this.el,
                multiple: this.multiple
            }, this.dropdown)
        };
        Accordion.prototype.dropdown = function (e) {
            var $el = e.data.el;
            $this = $(this);
            $next = $this.next();
            $next.slideToggle();
            $this.parent().toggleClass('open');
            if (!e.data.multiple) {
                $el.find('.submenu').not($next).slideUp().parent().removeClass('open');
            }
        };
        var accordion = new Accordion($('#accordion'), false);
        $('.submenu li').click(function () {
            $(this).addClass('current').siblings('li').removeClass('current');
        });
    });


    $(function () {
       var mySelect = new Vue({
           el: '#my-select',
           data() {
               return {
                   bank: '',
                   banks: [],
                   loading: false
               }
           },
           methods:{
               searchBanks(query) {
                   if(query !== ''){
                       this.loading = true
                       console.log(query)
                       this.banks = this.banks.concat([{value:2,label:'xxx'}])
                       this.loading = false
                   }
               }
           }
       })
    });


    /*3秒弹框*/
    $(".addBankNumber-btn").click(function () {
        $("#show3Div").show();

        var timeout = setTimeout(function () {
            $("#show3Div").delay(800).hide(0);
        }, 2000);
    });

</script>

<script>
    $(function () {
        var mySelect = new Vue({
            el: '#my-select',
            data() {
                return {
                    bank: '',
                    banks: [],
                    loading: false
                }
            },
            methods:{
                searchBanks(query) {
                    if(query !== ''){
                        this.loading = true
                        console.log(query)
                        this.banks = this.banks.concat([{value:2,label:'xxx'}])
                        this.loading = false
                    }
                }
            }
        })
    });


    /*城市选择*/
    $(function () {
        $("#city_1").citySelect();
        // $("#city_1").citySelect({
        //     prov: "北京",
        //     nodata: ""
        // });
    });
    /*这个下拉*/
    $(function () {
        $("#mySelect").click(function () {
            $(".mySelect").toggle();
        });
        var Uarry=$(".bank-content li");//获取所有的li元素
        $(".bank-content li").click(function(){//点击事件
            var count=$(this).index();//获取li的下标
            var Tresult=Uarry.eq(count).text();
            $(".textContent").text(Tresult);
            $(".mySelect").hide();
        });

        $(".btn-select").click(function () {
            $(".bank-content").show();
        })
    })
</script>

</body>
</html>
